<template>
  <div style="padding-bottom:24px">
    <table-ellipsis
      class="listTitle"
      :tableEllipsisIsTurnLine="false"
      :text="`${recordTitle} ：${recordData.partNumber}`"
    ></table-ellipsis>
    <a-row>
      <a-col
        :sm="24"
        v-for="(item,index) in versionList"
        :key="index"
      >
        <div class="versionItem">
          <div class="ecuName">
            <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis>
          </div>
          <div class="ecuOther">
            <span class="ecuNum">{{ $t('relatedECU') }} : {{ item.ecuIds&&item.ecuIds.length }}</span>
            <table-ellipsis
              class="versionCode"
              :tableEllipsisIsTurnLine="false"
              :text="`${$t('versionCode')} ：${item.code}`"
            ></table-ellipsis>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'

export default {
  name: 'RelatedVersion',
  components: { TableEllipsis },
  props: {
    recordTitle: {
      type: String,
      default: ''
    },
    recordData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      versionList: []
    }
  },
  mounted () {
    this.getVersionList()
  },
  methods: {
    getVersionList () {
      const vm = this
      vm.$api.allVersion({ ids: vm.recordData.versionIds }).then(response => {
        vm.versionList = response.data
      })
    }
  },
  watch: {
    recordData: {
      handler () {
        const vm = this
        vm.getVersionList()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.listTitle {
  color: #5e5e5e;
}
.versionItem {
  height: 98px;
  border: 1px solid @borderColor;
  border-left: 6px solid #4388a6;
  border-radius: 6px 4px 4px 6px;
  margin-top: 24px;
  padding: 16px 24px;
  &:hover {
    background: rgba(242, 242, 242, 0.5);
  }
  .ecuName {
    font-size: 1.6rem;
    color: #5e5e5e;
    font-weight: bolder;
  }
  .ecuOther {
    font-size: 1.2rem;
    color: #cdcdcd;
    margin-top: 24px;
    position: relative;
    .ecuNum {
      position: absolute;
      left: 0;
      top: 0;
    }
    .versionCode {
      padding-left: 140px;
    }
  }
}
</style>
